{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title }} - IoT智能家居控制系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-cpu me-2"></i>{{ title }}</h2>
            <a href="{% url 'devices:device_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>返回列表
            </a>
        </div>

        <!-- 表单 -->
        <div class="card">
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <div class="row">
                        <!-- 基本信息 -->
                        <div class="col-md-6">
                            <h5 class="mb-3"><i class="bi bi-info-circle me-2"></i>基本信息</h5>
                            
                            <div class="mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label">
                                    {{ form.name.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.name.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.brand.id_for_label }}" class="form-label">
                                    {{ form.brand.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.brand }}
                                {% if form.brand.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.brand.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">
                                    没有找到合适的品牌？<a href="{% url 'devices:brand_add' %}" target="_blank">添加新品牌</a>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.device_type.id_for_label }}" class="form-label">
                                    {{ form.device_type.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.device_type }}
                                {% if form.device_type.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.device_type.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">
                                    没有找到合适的类型？<a href="{% url 'devices:device_type_add' %}" target="_blank">添加新类型</a>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.model.id_for_label }}" class="form-label">
                                    {{ form.model.label }}
                                </label>
                                {{ form.model }}
                                {% if form.model.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.model.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.status.id_for_label }}" class="form-label">
                                    {{ form.status.label }}
                                </label>
                                {{ form.status }}
                                {% if form.status.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.status.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- 网络和位置信息 -->
                        <div class="col-md-6">
                            <h5 class="mb-3"><i class="bi bi-router me-2"></i>网络和位置</h5>
                            
                            <div class="mb-3">
                                <label for="{{ form.mac_address.id_for_label }}" class="form-label">
                                    {{ form.mac_address.label }}
                                </label>
                                {{ form.mac_address }}
                                {% if form.mac_address.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.mac_address.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">格式：AA:BB:CC:DD:EE:FF</div>
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.ip_address.id_for_label }}" class="form-label">
                                    {{ form.ip_address.label }}
                                </label>
                                {{ form.ip_address }}
                                {% if form.ip_address.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.ip_address.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">格式：192.168.1.100</div>
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.location.id_for_label }}" class="form-label">
                                    {{ form.location.label }}
                                </label>
                                {{ form.location }}
                                {% if form.location.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.location.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">例如：客厅、卧室、厨房等</div>
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.description.id_for_label }}" class="form-label">
                                    {{ form.description.label }}
                                </label>
                                {{ form.description }}
                                {% if form.description.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.description.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- 表单按钮 -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{% url 'devices:device_list' %}" class="btn btn-secondary">
                                    <i class="bi bi-x-circle me-1"></i>取消
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle me-1"></i>保存
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 帮助信息 -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-question-circle me-2"></i>填写说明</h6>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li><strong>设备名称</strong>：为设备起一个容易识别的名称</li>
                    <li><strong>设备品牌</strong>：选择设备的制造商品牌</li>
                    <li><strong>设备类型</strong>：选择设备的功能类型</li>
                    <li><strong>MAC地址</strong>：设备的物理地址，用于网络识别</li>
                    <li><strong>IP地址</strong>：设备在网络中的地址</li>
                    <li><strong>位置</strong>：设备安装的物理位置</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 表单验证
    $('form').on('submit', function(e) {
        var isValid = true;
        var requiredFields = ['name', 'brand', 'device_type'];
        
        requiredFields.forEach(function(field) {
            var input = $('[name="' + field + '"]');
            if (!input.val()) {
                isValid = false;
                input.addClass('is-invalid');
            } else {
                input.removeClass('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('请填写所有必填字段');
        }
    });
    
    // 实时验证
    $('input, select').on('change', function() {
        if ($(this).val()) {
            $(this).removeClass('is-invalid');
        }
    });
});
</script>
{% endblock %}